<template>
  <div>
    <div class="library-list">
      <el-card class="library-card" v-for="item of libraryList" :key="item.id">
        <div class="library-item">
          <img class="library-img" :src="`//127.0.0.1:9003/${item.image}`" />
          <div class="library-name">
            {{ item.name }}
          </div>
          <div class="library-number">
            <div v-show="type == 1">
              座位数：<span style="font-weight: 600">{{ item.number }}</span>
            </div>
            <div v-show="type == 2">
              研讨室数：<span style="font-weight: 600">
                {{ item.seminarNum ? item.seminarNum : 0 }}
              </span>
            </div>
          </div>
          <div class="library-details">
            {{ item.details }}
          </div>
          <div class="library-btn">
            <el-button v-if="type == 1" type="warning" @click="$router.push(`/seat/${item.id}`)">
              预约座位
            </el-button>
            <el-button
              v-if="type == 2"
              style="margin-left: 20px"
              type="danger"
              @click="$router.push(`/seminar/${item.id}`)"
            >
              预约研讨室
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import request from '@/req'
export default {
  data() {
    return {
      libraryList: [],
      type: this.$route.params.id,
    }
  },
  created() {
    this.getLibraryList()
  },
  methods: {
    async getLibraryList() {
      const res = await request.get('/library/getLibraryList')
      this.libraryList = res ? res : []
    },
  },
}
</script>

<style scoped>
.library-list {
  display: flex;
  flex-direction: row;
  padding-top: 50px;
}
.library-card {
  flex: 1;
  margin: 0 10px;
  max-width: 800px;
}
.library-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.library-img {
  width: 100%;
  height: 350px;
  max-width: 100%;
  max-height: 100%;
}

.library-name {
  font-size: 20px;
  font-weight: 600;
  padding: 8px;
  margin-top: 20px;
}
.library-details {
  padding: 8px;
  flex: 1;
}

.library-number {
  padding: 8px;
}

.library-btn {
  margin-top: 30px;
  padding: 0 20px;
}
</style>
